<template>
	<view>
		<form>
			<view class="uni-form-item uni-column">
				<view class="form-title">
					<text class="mandatory">*</text>
					<text>姓名</text>
				</view>
				<view class="form-value">
					<input class="uni-input" @blur="changeBtnStatus()" v-model="name" name="name" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="form-title">
					<text class="mandatory">*</text>
					<text>手机号</text>
				</view>
				<view class="form-value">
					<input class="uni-input" type="number" @blur="changeBtnStatus()" v-model="phone" name="phone"
						placeholder="请输入手机号" />
				</view>
			</view>


			<view class="uni-form-item uni-column">
				<view class="form-title">
					<text class="mandatory">*</text>
					<text>店铺选择</text>
				</view>
				<view class="form-value">
					<picker @change="bindPickerName" :value="index" :range="shopNameList">
						<view class="uni-input">{{selectShopName}}</view>
					</picker>
				</view>
			</view>

			<view class="from-btn">
				<button form-type="submit" @click="add" :class="isActive">保存</button>
			</view>

		</form>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				isActive: '', //判断按钮是否禁用样式或者放开  active:放开、''：禁用
				formdata: {},
				name: '',
				phone: '',
				myDialog: 'myDialog',
				styleList: ["月租", "流水分成"],
				placeholder: '请输入分成',
				profit: '',
				deviceList: [],
				isOpenProfit: -1,
				profitType: 'rent',
				selectShopName: '请选择店铺',
				selectShopId: -1,
				shopListValue: [],
				shopNameList: []

			}
		},
		onLoad() {
			this.shopList();
		},
		onShow() {


		},
		methods: {

			bindPickerName(e) {

				var index = e.target.value;
				this.selectShopName = this.shopListValue[index].name;
				this.selectShopId = this.shopListValue[index].id;

			},


			shopList() {
				let param = {

				}
				let that = this;
				this.$api.selectShopList(param).then(res => {

					if (res.code == 1) {

						var list = res.data;
						that.shopListValue = list;
						for (var i = 0; i < list.length; i++) {
							that.shopNameList.push(list[i].name);
						}
					}
					console.info("=====selectShopList=====" + JSON.stringify(res));
				})
			},

			changeBtnStatus: function() {
				this.isActive = 'active'
			},


			add() {
				if (this.name == '') {
					this.$util.$showToast('请输入用户名', '', 'none');
					return;
				}
				if (this.phone == '') {
					this.$util.$showToast('请输入手机号', '', 'none');
					return;
				}
				if (this.selectShopId == -1) {
					this.$util.$showToast('请选择店铺', '', 'none');
					return;
				}
				let param = {
					name: this.name,
					phone: this.phone,
					shopId: this.selectShopId,
				}
				let that = this;
				this.$api.addShopAdmin(param).then(res => {
					if (res.code == 1) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$util.$showToast(res.msg, null, 'none');
					}
				})


			}
		}
	}
</script>

<style lang="scss">
	.uni-form-item {
		display: flex;
		height: 96rpx;
		line-height: 96rpx;
		margin: 0 0 0 30rpx;
		border-bottom: 0.5rpx solid #E1E1E1;

		.form-title {
			flex: 2;
			font-size: 30rpx;
			color: #808080;

			.mandatory {
				color: #FF0000;
				margin-right: 10rpx;
			}
		}

		.slotbg {
			background: rgba($color: #37C2BC, $alpha: 0.1);
			color: #999999;
			padding: 0rpx 20rpx;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}

		.form-value {
			flex: 5;
			text-align: right;

			input {
				height: 96rpx;
				line-height: 96rpx;
				padding: 0 20rpx;
			}

			.input-placeholder {
				color: #999999;
			}
		}
	}
</style>
